import 'package:flutter/material.dart';
import 'package:yuan_hang_app/res/w_colors.dart';
import 'package:yuan_hang_app/utils/size_utils.dart';
import 'package:yuan_hang_app/widget/w_line.dart';
import 'package:yuan_hang_app/widget/w_text.dart';

class CustomTab extends StatefulWidget {
  final List<Map> tabList;
  final String titleKey;
  final double height;
  final double? width;
  final Color backColor;
  final Color textColor;
  final Color selectTextColor;
  final double textSize;
  final double lineHeight;
  final double? lineWidth;
  final double lineRadius;
  final Function(int index)? tabClick;

  const CustomTab(
      {super.key,
      required this.tabList,
        this.titleKey = "title",
      this.height = 48,
      this.width,
      this.backColor = WColors.white,
      this.textColor = WColors.mainTextColor,
      this.selectTextColor = WColors.primaryColor,
      this.lineHeight = 3,
      this.lineWidth,
      this.lineRadius = 3,
      this.tabClick,
      this.textSize = 14});

  @override
  State<CustomTab> createState() => _CustomTabState();
}

class _CustomTabState extends State<CustomTab> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height.px,
      width: widget.width?.px ?? SizeUtils.screenW(),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: widget.backColor, boxShadow: [
        BoxShadow(
            color: WColors.CDFEFFB,
            offset: const Offset(0, 1),
            blurRadius: 3.px)
      ]),
      child: _tabList(),
    );
  }

  Row _tabList() {
    List<Widget> list = [];
    double lineWidth = widget.lineWidth?.px ??
        (SizeUtils.screenW() / widget.tabList.length - 40.px);
    for (int i = 0; i < widget.tabList.length; i++) {
      var item = widget.tabList[i];
      list.add(GestureDetector(
        onTap: () {
          currentIndex = i;
          setState(() {});
          if (widget.tabClick != null) {
            widget.tabClick!(i);
          }
        },
        child: Container(
            color: WColors.white,
            width: SizeUtils.screenW() / widget.tabList.length,
            height: widget.height.px,
            child: Stack(
              children: [
                Center(
                  child: WText(
                    "${item[widget.titleKey]}${item["count"] != null ? '(${item["count"]})' : ''}",
                    style: TextStyle(
                        color: currentIndex == i
                            ? widget.selectTextColor
                            : widget.textColor,
                        fontSize: widget.textSize.px),
                  ),
                ),
                currentIndex == i
                    ? Positioned(
                        bottom: 0,
                        left: (SizeUtils.screenW() / widget.tabList.length -
                                lineWidth) /
                            2,
                        child: WLine(
                          color: widget.selectTextColor,
                          height: widget.lineHeight.px,
                          width: lineWidth,
                          borderRadius: widget.lineRadius.px,
                        ))
                    : const SizedBox()
              ],
            )),
      ));
    }
    return Row(
      children: list,
    );
  }
}
